<template>
	<view class="order-wrap page-bg">
		<scroll-view class="scroll-menu" scroll-x="true">
			<view v-for="item in navs"  :key='item.id' :class="item.id === currentNavId?'menu-item menu-item-active':'menu-item'"
				@click="setActive(item.id)"
				style="width: 25%;"
			>
				{{item.title}}
				<text class="after-line"></text>
			</view>
		</scroll-view>
		<view class="order-list">
			<view class="order-group"
				  v-for="(item, index) in items" :key='item.id'
				>
				<view class="order-shop">
					<view class="status-dfh">
						<text>{{item.askNum}}人团, 还差{{item.needNum}}人</text>
					</view>
					<view class="order-status status-dfk">{{item.assState}}</view>
				</view>

				<view class="goods-item" @click="link('/pages/mine/orderTeamDetail?id='+item.id)">
					<image class="goods-img" :src="item.imgUrl"></image>
					<view class="goods-info">
						<view class="goods-title">{{item.comTitle}}</view>
						<view class="goods-sepc"></view>
						<view class="goods-price">
							<text class="price yuan">{{item.fixedPrice}}</text>
							<text class="goods-num">x1</text>
						</view>
					</view>
				</view>

				<view class="should-price">共1件商品，应付款: <text class="price yuan">{{item.fixedPrice}}</text></view>
				
				<view class="order-btns" >
					<view class="order-limit">
						<!-- <text>{{item.askNum}}人团, 还差{{item.needNum}}人</text> -->
						<text>开始时间:{{item.startTime | formatTime}}</text>
						<text>结束时间:{{item.endTime | formatTime}}</text> 
					</view>
					<view class="order-op">
						<text class="op op-sh" @click="link('/pages/shop/shopTeamDetailShare?id='+item.id)">查看详情</text>
					</view>
				</view>
			</view>

			<footerInfo :text='text'></footerInfo>
		</view>
		</view>
</template>

<script>
	import footerInfo from '../../components/footerInfo.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return {
				isActive: false,
				text: '已经没有更多了',
				currentNavId: 'all',
				navs: [
					{ id: 'all', title: '全部' },
					{ id: 2, title: '拼团中'},
					{ id: 3, title: '已完成' },
					{ id: -1, title: '已失效' },
				],
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				freeTimeArr: []
			}
		},
		onLoad() {
			this.pageSize = common.pageSize
			
			this.getItems()
		},
		methods: {
			setActive(id) {
				this.currentNavId = id
				this.pageIndex = 1
				this.items = []
				this.getItems()
			},
			
			link(url) {
				this.$link(url)
			},
			
			getFreeTime(info, index) {
				let that = this
				let date1 = new Date()
				let date2 = new Date(info.endTime)
				let lastTime = (date2 - date1 ) / 1000
				let d,h,m,s,timeText
				let timer = setInterval(function(){
					lastTime--
					d = parseInt(lastTime / (24*3600))
					h = parseInt(lastTime / 60 / 60 % 24)
					m = parseInt(lastTime / 60 % 60)
					s = parseInt(lastTime % 60)
					s = s < 10 ? '0' + s : s 
					timeText = d * 24 + h +':' + m + ':' + s
					// that.freeTime = { h: d * 24 + h, m, s }
					let temp = [0]
					temp.splice(index, 1, timeText)
					this.freeTimeArr = temp
					if(info.isFinish) {
						clearTimeout(timer)
					}
				},1000)
			},
			
			getItems() {
				let that = this
				let assState = that.currentNavId
				if (assState === 'all') { assState = -2 }
				let { pageIndex, pageSize } = that.$data
				api.getMyAssPage({
					assState, pageIndex, pageSize
				}, (res) => {
					that.totalCount = res.totalCount
					if (that.pageSize > res.totalCount) {
						that.text = '已经没有更多了~'
					}
					that.items = [...that.items, ...res.items]
				})
			}
		},
		
	
		onReachBottom() {
			if (this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			} else {
				this.pageIndex++
				this.getItems()
			}
		},
		components: {
			footerInfo
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.order-list {
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.order-group {
		background-color: @f;
		.br;
		.content-20;
		margin-bottom: 20upx;
	}

	.order-group:last-child {
		margin-bottom: 0;
	}

	.order-shop {
		width: 100%;
		margin-bottom: 20upx;
		.flex-base;
		.desc{
			width: 100%;
			.flex-base;
			justify-content: space-between;
		}
		.order-shop-name {
			.flex-base;
			.f24;

			&::before {
				content: '';
				background: url() no-repeat left center;
				background-size: 22upx 22upx;
				display: block;
				width: 22upx;
				height: 24upx;
				padding-right: 10upx;
			}
		}

		.order-status {
			.fw;
		}

		.status-dfk {
			color: @theme-color;
		}

		.status-dfh {
			color: @font-orange-color;
		}

		.status-dsh {
			color: @font-orange-color;
		}

		.status-ywc {
			color: @font-base-color
		}
	}

	.goods-item {
		.flex-base;
		margin-bottom: 30upx;
		padding: 0;
		.goods-img {
			width: 150upx;
			height: 150upx;
			.br;
			margin-right: 30upx;
			flex-shrink: 0;
		}

		.goods-info {
			flex-grow: 2;
		}

		.goods-title {
			.f30;
			width: 100%;
		}

		.goods-sepc {
			.f24;
			color: @font-dark-color;
			padding: 10upx 0;
		}

		.goods-price {
			width: 100%;
			.flex-base;
			justify-content: space-between;

			.goods-num {
				.f24;
			}
		}

	}

	.should-price {
		padding-top: 30upx;
		border-top: 1px solid @border-color;
		margin-bottom: 30upx;
		text-align: right;
		.f24;

		.price {
			.fw;
			.f32;
			color: @theme-color;
		}
	}

	.order-btns {
		.flex-base;

		.order-limit {
			.f24;
			color: @font-dark-color;
			.flex-base;
			flex-wrap: wrap;
			text{
				width: 100%;
			}
		}

		.order-kd {
			color: @font-orange-color;
		}

		.icon-del {
			width: 30upx;
			height: 30upx;
		}

		.order-op {
			.op {
				height: 60upx;
				display: inline-block;
				border: 1px solid @border-color;
				border-radius: 60upx;
				text-align: center;
				line-height: 60upx;
				.f26;
				margin-left: 20upx;
				padding: 0 20upx;
			}

			.op-buy {
				color: @f;
				background: @font-orange-color;
			}

			.op-sh {
				border-color: @font-orange-color;
				color: @font-orange-color;
				min-width: 110upx;
			}
		}

		.order-op {}

		.order-op {}
	}
</style>
